import {imagesUrl} from '@/libs/baseUrl'
import {SkeletonProps} from 'ant-design-vue'
import {PropType} from 'vue'
import {CnBoldP} from './text'

export const CCard = defineComponent({
  props: {
    title: {
      type: String,
      required: true
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    spinning: Boolean,
    loading: Boolean,
    skeletonProps: {
      type: Object as PropType<SkeletonProps>,
      default: () => ({})
    },
    canHoverMove: {
      type: Boolean,
      default: true
    },
    actived: Boolean,
    onClick: Function as PropType<(e: MouseEvent) => void>,
    vein: Boolean,
    id: String
  },
  setup(props, {slots}) {
    const bodyVeinStyle = computed(() =>
      props.vein
        ? {
            backgroundImage: `url(${imagesUrl('card-vein-block')})`,
            backgroundSize: '245px',
            backgroundPosition: 'right bottom',
            backgroundRepeat: 'no-repeat'
          }
        : {}
    )

    const titleVeinStyle = computed(() =>
      props.vein
        ? {
            backgroundImage: `url(${imagesUrl('card-vein-inline')})`,
            backgroundSize: '100% 100%',
            backgroundPosition: 'right bottom',
            backgroundRepeat: 'no-repeat',
            paddingLeft: '20px',
            paddingRight: '20px'
          }
        : {}
    )

    return () => (
      <div
        id={props.id}
        title={props.title}
        class={[
          'CBC-card relative rounded-4 shadow-card transition-all duration-300 transform flex flex-col',
          props.canHoverMove && !props.actived ? 'hover:-translate-y-4' : '',
          props.actived ? '-translate-y-4 shadow-cardActived' : ''
        ]}
        style={Object.assign(
          {
            padding: '20px 16px 20px 16px'
          },
          bodyVeinStyle.value
        )}
        onClick={e => props.onClick && props.onClick(e)}
      >
        {props.loading ? (
          <a-skeleton
            class='p-16'
            active
            loading={true}
            paragraph={props.skeletonProps.paragraph}
          ></a-skeleton>
        ) : (
          <>
            {/* 卡片标题 */}
            <div class={['w-full', props.showTitle ? '' : 'hidden']} style={titleVeinStyle.value}>
              <CnBoldP class='card-title hanzi text-16 font-bold text-black'>
                {slots.title ? slots.title?.() : props.title}
              </CnBoldP>
            </div>

            {/* 卡片内容 */}
            <div class='w-full flex-1'>{slots.default?.()}</div>
          </>
        )}
      </div>
    )
  }
})
